<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>sedt</title>
    <link rel="stylesheet" href="../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="modal.css"/>
    <style type="text/css">
        .site-bgcolor{
            background:AliceBlue
        }
    </style>
</head>
<body>
<!--
<div id="app" class="container">
-->
<div id="app" class="container-fluid">
    <div class="row-fluid">
        <div class="col-sm-12">
            <h3 class="page-header text-center">
               文件管理
            </h3>
        </div>
    </div>

    <div id="objectlist" v-show="mode=='modeList'">
        <div class="row">
            <div class="table-responsive col-sm-12">
                <table class="table table-bordered table-condensed table-striped">
                    <thead>
                    <tr>
                        <th></th>
                        <th >id</th>
                        <th >category</th>
                        <th >dataTimeStr</th>
                        <th >suffix</th>
                        <th >state</th>
                      <th>content</th>
                        <th>oper</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in items">
                        <td><input type="checkbox" v-model="item.selected"> </td>
                        <td><a href="#"  v-on:click="onChange(item,$event)">{{item.shortname}}</a>
                            <ul class="media-list row contacts-container"></ul></td>
                        <td>{{item.category}}</td>
                        <td>{{item.dataTimeStr}}</td>
                        <td>{{item.suffix}}</td>
                        <td>{{item.state}}</td>
                        <td>{{item.content}}</td>
                        <td>
                            <a href="#" v-on:click="setMode('modeEdit')">编辑</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
<!--            <div class="col-sm-12">
                <datatable tabledef="{{tabledef}}"></datatable>
            </div>-->
        </div>

    </div>  <!-- object list view -->

    <div id="objecteditor" v-show="mode=='modeAddNew'">
        <div class="row" >
            <itemeditor mode="{{mode}}" item="{{curitem}}" on-submit="{{onSave}}" on-cancel="{{onCancel}}"></itemeditor>
        </div>
    </div>

</div> <!-- app -->


<template id="itemeditor-tpl">
    <div class="col-sm-12">
        <!-- <form class="form-horizontal"> -->
        <div class="form-horizontal">
            <div class="site-bgcolor">
                <!--``````````````````````````````````````````````````````````````````````````````````````````````````````````````-->
              <input class="form-control" id="id"  v-model="item.content">
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <a href="#" v-on:click="setMode('modeList')">delete</a>
                    <button class="btn btn-default" v-on:click="onCancelClick($event)">取消</button>
                    <button class="btn btn-default" v-on:click="onSubmitClick($event)">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>

<template id="itemadd-tpl">
    <div class="col-sm-12">
        <!-- <form class="form-horizontal"> -->
        <div class="form-horizontal">
            <div class="site-bgcolor">
                <hr />
                add
                <hr />
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default" v-on:click="onCancelClick($event)">取消</button>
                    <button class="btn btn-default" v-on:click="onSubmitClick($event)">提交</button>
                </div>
            </div>
        </div>
    </div>
</template>
<!-- template for the modal component -->
<template id="modal-template">
    <div class="modal-mask" v-show="show" v-transition="modal">
        <div class="modal-wrapper">
            <div class="modal-container">
                <content select=".modal-header">
                    <div class="modal-header">
                        default header
                    </div>
                </content>
                <content select=".modal-body">
                    <div class="modal-body">
                        default body
                    </div>
                </content>
                <content select=".modal-footer">
                    <div class="modal-footer">
                        default footer
                        <button class="btn btn-default modal-button" v-on="click: show=false">Cancel</button>
                        <button class="btn btn-default modal-default-button" v-on="click: show=false">OK</button>
                    </div>
                </content>
            </div>
        </div>
    </div>
</template>

<script src="../../lib/jquery/2.1.4/jquery-2.1.4.min.js"></script>
<script src="../../lib/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/vue-resource/dist/vue-resource.js"></script>
<!--
<script src="vue-components-v13.js"></script>
-->
<script src="sedt1.js"></script>

</body>
</html>
